<template>
  <div>
    <!-- 首页 -->
    <div class="content">
      <div class="header">
        <h3 class="blue-bg">首页</h3>
        <div>
          <div class="btn">
            <el-button plain>发布实单询价</el-button>
            <el-button plain>发布普通询价</el-button>
            <el-button plain>发布BOM询价</el-button>
          </div>

        </div>

      </div>
      <div class="body">
        <el-skeleton :rows="1"
                     class="myskeleton"
                     :loading="loading1"
                     animated>
          <template slot="template">
            <el-skeleton-item v-for="v in 7"
                              :key="v"
                              style="width: 160px;  height: 48px;" />
          </template>
          <template>
            <ul>
              <li>
                <p>100</p>
                <label>实单询价</label>
              </li>
              <li>
                <p>100</p>
                <label>普通询价</label>
              </li>
              <li>
                <p>100</p>
                <label>BOM询价</label>
              </li>
              <li>
                <p>100</p>
                <label>议价中</label>
              </li>
              <li>
                <p>100</p>
                <label>待发货</label>
              </li>
              <li>
                <p>100</p>
                <label>待付款</label>
              </li>
              <li>
                <p>100</p>
                <label>待开发票</label>
              </li>
            </ul>
          </template>
        </el-skeleton>
      </div>
    </div>
    <div class="content">
      <div class="header">
        <h3>询价成功率（按月统计）</h3>
      </div>
      <div class="body"
           v-loading="loading2">
        <div class="form"
             id="form1">
        </div>
      </div>
    </div>
    <div class="content">
      <div class="left">
        <div class="header">
          <h3> 订单统计（按月统计）</h3>
        </div>
        <div class="body"
             v-loading="loading3">
          <div class="form"
               id="form2"></div>
        </div>
      </div>
      <div class="right">
        <div class="header">
          <h3> 成交金额统计（按月统计）</h3>

        </div>
        <div class="body"
             v-loading="loading4">
          <div class="form"
               id="form3"></div>
        </div>
      </div>
    </div>

  </div>
</template>

  <script>
// 建议上线时修改成自定义组件打包下载   详见官网下载
import * as Echart from 'echarts';
export default {
    data() {
        return {
            // 骨架屏loading
            loading1: true,
            loading2: true,
            loading3: true,
            loading4: true,
        };
    },
    created() {
        setTimeout(() => {
            this.loading1 = false;
        }, 800);
    },
    mounted() {
        this.handleChart1();
        this.handleChart2();
        this.handleChart3();
    },
    methods: {
        // 渲染询价成功率表格
        handleChart1() {
            var chartDom = document.getElementById('form1');
            let dataObj = {
                d1: [14, 33, 22, 213, 123, 112, 212, 1, 2, 3, 255, 99],
                d2: [53, 11, 22, 63, 33, 97, 75, 69, 65, 77, 112, 101],
                d3: [13, 55, 31, 6, 55, 21, 55, 11, 122, 213, 52, 98],
            };
            if (chartDom) {
                var myChart = Echart.init(chartDom);
                var option;
                option = {
                    grid: {
                        top: 40,
                        bottom: 35,
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999',
                            },
                        },
                    },

                    legend: {
                        bottom: 5,
                        data: ['询价数', '收到报价数', '生成报价单数'],
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisPointer: {
                                type: 'shadow',
                            },
                            data: [
                                '1月',
                                '2月',
                                '3月',
                                '4月',
                                '5月',
                                '6月',
                                '7月',
                                '8月',
                                '9月',
                                '10月',
                                '11月',
                                '12月',
                            ],
                        },
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '数量（个）',
                            axisLine: {
                                show: false,
                            },
                            axisLabel: {
                                formatter: '{value} ',
                            },
                        },
                    ],
                    series: [
                        {
                            name: '询价数',
                            yAxisIndex: 0,
                            type: 'bar',

                            emphasis: {
                                focus: 'series',
                            },
                            itemStyle: {
                                color: '#3a7bd9',
                            },
                            barWidth: 15,
                            data: dataObj.d1,
                        },
                        {
                            name: '收到报价数',
                            yAxisIndex: 0,
                            type: 'bar',

                            emphasis: {
                                focus: 'series',
                            },
                            itemStyle: {
                                color: '#31b76d',
                            },
                            barWidth: 15,
                            data: dataObj.d2,
                        },
                        {
                            name: '生成报价单数',
                            yAxisIndex: 0,
                            type: 'bar',

                            emphasis: {
                                focus: 'series',
                            },
                            itemStyle: {
                                color: '#dcc921',
                            },
                            barWidth: 15,
                            data: dataObj.d3,
                        },
                    ],
                };

                setTimeout(() => {
                    this.loading2 = false;
                    option && myChart.setOption(option);
                }, 1000);
            }
        },

        handleChart2() {
            var chartDom = document.getElementById('form2');
            let dataObj = {
                d1: [14, 33, 22, 213, 123, 112, 212, 1, 2, 3, 255, 99],
                d2: [53, 11, 22, 63, 33, 97, 75, 69, 65, 77, 112, 101],
                d3: [13, 55, 31, 6, 55, 21, 55, 11, 122, 213, 52, 98],
            };
            if (chartDom) {
                var myChart = Echart.init(chartDom);
                var option;
                option = {
                    grid: {
                        top: 40,
                        bottom: 35,
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999',
                            },
                        },
                    },
                    legend: {
                        bottom: -5,
                        data: ['实单', '普通', 'BOM'],
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisPointer: {
                                type: 'shadow',
                            },
                            data: [
                                '1月',
                                '2月',
                                '3月',
                                '4月',
                                '5月',
                                '6月',
                                '7月',
                                '8月',
                                '9月',
                                '10月',
                                '11月',
                                '12月',
                            ],
                        },
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '数量（个）',
                            axisLine: {
                                show: false,
                            },
                            axisLabel: {
                                formatter: '{value} ',
                            },
                        },
                    ],
                    series: [
                        {
                            name: '实单',
                            yAxisIndex: 0,
                            type: 'line',
                            emphasis: {
                                focus: 'series',
                            },
                            itemStyle: {
                                color: '#3a7bd9',
                            },
                            data: dataObj.d1,
                        },
                        {
                            name: '普通',
                            yAxisIndex: 0,
                            type: 'line',
                            emphasis: {
                                focus: 'series',
                            },
                            itemStyle: {
                                color: '#31b76d',
                            },

                            data: dataObj.d2,
                        },
                        {
                            name: 'BOM',
                            yAxisIndex: 0,
                            type: 'line',
                            emphasis: {
                                focus: 'series',
                            },
                            itemStyle: {
                                color: '#dcc921',
                            },
                            data: dataObj.d3,
                        },
                    ],
                };

                setTimeout(() => {
                    this.loading3 = false;
                    option && myChart.setOption(option);
                }, 1000);
            }
        },
        handleChart3() {
            var chartDom = document.getElementById('form3');
            let dataObj = {
                d1: [14, 33, 22, 213, 123, 112, 212, 1, 2, 3, 255, 99],
                d2: [53, 11, 22, 63, 33, 97, 75, 69, 65, 77, 112, 101],
                d3: [13, 55, 31, 6, 55, 21, 55, 11, 122, 213, 52, 98],
            };
            if (chartDom) {
                var myChart = Echart.init(chartDom);
                var option;

                option = {
                    grid: {
                        top: 40,
                        bottom: 35,
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999',
                            },
                        },
                    },

                    legend: {
                        bottom: -5,
                        data: ['实单', '普通', 'BOM'],
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisPointer: {
                                type: 'shadow',
                            },
                            data: [
                                '1月',
                                '2月',
                                '3月',
                                '4月',
                                '5月',
                                '6月',
                                '7月',
                                '8月',
                                '9月',
                                '10月',
                                '11月',
                                '12月',
                            ],
                        },
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '数量（个）',
                            axisLine: {
                                show: false,
                            },
                            axisLabel: {
                                formatter: '{value} ',
                            },
                        },
                    ],
                    series: [
                        {
                            name: '实单',
                            yAxisIndex: 0,
                            type: 'line',

                            emphasis: {
                                focus: 'series',
                            },
                            itemStyle: {
                                color: '#3a7bd9',
                            },
                            barWidth: 15,
                            data: dataObj.d1,
                        },
                        {
                            name: '普通',
                            yAxisIndex: 0,
                            type: 'line',

                            emphasis: {
                                focus: 'series',
                            },
                            itemStyle: {
                                color: '#31b76d',
                            },
                            barWidth: 15,
                            data: dataObj.d2,
                        },
                        {
                            name: 'BOM',
                            yAxisIndex: 0,
                            type: 'line',

                            emphasis: {
                                focus: 'series',
                            },
                            itemStyle: {
                                color: '#dcc921',
                            },
                            barWidth: 15,
                            data: dataObj.d3,
                        },
                    ],
                };

                setTimeout(() => {
                    this.loading4 = false;
                    option && myChart.setOption(option);
                }, 1000);
            }
        },
    },
};
</script>

  <style lang="scss" scoped>
.content {
    font-size: 16px;
    margin: 20px 0px;
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        h3 {
            font-weight: bold;
        }
    }
    .body {
        margin: 10px 5px;
        ul {
            display: flex;
            width: 100%;
            justify-content: space-between;
            li {
                text-align: center;
                width: 160px;
                height: 48px;
                line-height: 24px;
                border-radius: 5px;
                border: 1px solid #ccc;
                background: #c4d8e9;
                padding: 10px;
                cursor: pointer;
            }
        }
        .el-skeleton {
            display: flex;

            width: 100%;
            justify-content: space-between;
            .el-skeleton__item {
                width: 160px;
                height: 48px;
                padding: 10px;
            }
        }

        .form {
            width: 100%;
            height: 310px;
        }
    }

    .blue-bg::before {
        content: ' ';
        width: 8px;
        height: 20px;
        background: #0782eb;
        display: inline-block;
        vertical-align: bottom;
        margin: 0px 5px;
    }
}

.content:last-child {
    display: flex;
    margin-bottom: 0px;
    .left,
    .right {
        flex: 1;
    }
}
.content:first-child {
    margin-top: 0px;
}
</style>

<style lang="scss">
.myskeleton .el-skeleton {
    display: flex;

    width: 100%;
    justify-content: space-between;
}
</style>

